/*
 * @Author: ZARR 
 * @Date: 2018-04-09 17:21:38 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-04-11 14:36:07
 * @作用: 钓鱼版详情页
 */

<template>
  <div id="fisher">
      <swellpro-bar :barData="barData" :offsetTopNow="topToScreen"></swellpro-bar>
      <section class="section-1" :style="{'backgroundImage' : `url(${!isMobile ? 'https://cdn.swellpro.cn/fisher/SplashDrone-3-Fishing-Version.jpg' : 'https://cdn.swellpro.cn/fisherMobile/splashdrone-3-fishing-version-m.jpg'})`}">
        <div class="container">
        <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
            <h1>钓鱼新装备 - 水手3钓鱼版</h1>
            <p>自2015年斯威普水手无人机在新西兰西海岸投放鱼饵后，国内外便开始兴起了无人机钓鱼的浪潮。</p>
            <p>为了让更多普通钓鱼爱好者用不同的方式来感受钓鱼的乐趣，我们精心研发并制作了一款专门带有投放装置的无人机 —— “水手3钓鱼版”。</p>
            <p>它相对于之前的版本更加简单易用，拥有着一如既往防水性和防腐蚀性。水手3无人机具备强劲的动力系统，对各种天气和环境都能应对自如。水手3钓鱼版具备更广泛的投放范围，也可多鱼饵同时投放，大大增加了捕获率。</p>
            <p>新投放器里的快拆系统提高了使用效率，让您在投放鱼饵的同时也可录制高品质视频，尽情享受钓鱼带来的乐趣。</p>
        </animation-content>
        </div>
      </section>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="common-1">
          <div class="container">
              <div class="imgBox">
                <img :src=" !isMobile ? 'https://cdn.swellpro.cn/fisher/beach-fishing-with-SplashDrone-3.jpg' : 'https://cdn.swellpro.cn/fisherMobile/beach-fishing-with-splashdrone-3-m.jpg' " alt="">
                <p>
                    远距离准确投放
                </p>
              </div>
              <div class="contentBox">
                  
                  <p>
                      想要在深海区域垂钓无需乘风破浪，水手3无人机钓鱼版可将鱼线携带至1公里外的距离，并将鱼饵投放到目标位置，不会惊扰鱼群。
                  </p>
                  <p>
                      跟一些DIY无人机的钓鱼平台不同，水手3的投放装置模块能准确部署你的鱼线，通过遥控器上的一个开关即可实现投放，且不会影响飞行性能和成像质量。
                  </p>
                  
              </div>
          </div>
          
      </div>
      </animation-content>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="common-2">
          <div class="container">
              
              <p class="title">模块选项</p>
              <p>水手3投放装置模块可实现快速拆装</p>
              
              <div class="modules">
                  <div class="item">
                    <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInLeft'">
                      <img src="https://cdn.swellpro.cn/fisher/pl2-release-mechanism.jpg" alt="">
                      <p class="title">PL2</p>
                      <p>PL2是水手3钓鱼版标准配置，拥有远程投放装置和固定角度的高清摄像机，飞行前可以设定相机的角度来满足需求。该相机仅用于画面实时传输，不能录制视频。</p>
                    </animation-content>
                  </div>
                  <div class="item">
                    <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">
                      <img src="https://cdn.swellpro.cn/fisher/pl3-release-mechanism.jpg" alt="">
                      <p class="title">PL3</p>
                      <p>
                          PL3是水手3更为先进的投放装置模块，拥有远程投放装置和4K相机。能准确地定位目标，还能清晰地记录整个过程。
                      </p>
                    </animation-content>
                  </div>
              </div>
          </div>
          
      </div>
      </animation-content>
      <section class="section-2" :style="{'backgroundImage' : `url(${!isMobile ? 'https://cdn.swellpro.cn/fisher/multiple-bait-dropping.jpg' : ''})`}">
        <div class="container">
            <img src="https://cdn.swellpro.cn/fisherMobile/multiple-baits-dropping-m.jpg" alt="" class="minScreen">
            <div class="top">
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
                <p class="title">
                10个鱼饵一次投送
                </p>
                <p>
                    优越的1kg负载能力意味着一次可以携带10个以上的鱼饵和鱼钩，甚至可以携带重饵让鲨鱼或大型金枪鱼上钩。
                </p>
                <p>
                    高精度铝合金和钢制成的投放装置自身就可以承受6kg的重力，尽管有鱼线轮的拖曳，飞机仍然能在数秒之内把鱼线带过浅滩。
                </p>
            </animation-content>
            </div>
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
            <div class="bottom maxScreen">
                <div class="item fistItem">
                    <p class="inTitle">
                        1 kg
                    </p>
                    <p>
                        载荷能力
                    </p>
                </div>
                <div class="item">
                    <p class="inTitle">
                        1.4 km
                    </p>
                    <p>
                        铸造范围
                    </p>
                </div>
                <div class="item">
                    <p class="inTitle">
                        16 m/s
                    </p>
                    <p>
                        飞行速度
                    </p>
                </div>
                <div class="item">
                    <p class="inTitle">
                        18 mins
                    </p>
                    <p>
                        飞行时间
                    </p>
                </div>
            </div>
            </animation-content>
        </div>
      </section>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="common-3">
          <div class="container" :style="{'backgroundImage' : `url(${!isMobile ? 'https://cdn.swellpro.cn/fisher/fish-finder-camera.jpg' : ''})`}">
             <img src="https://cdn.swellpro.cn/fisherMobile/fish-finder-camera-m.jpg" alt="" class="minScreen">
              <div class="inlineBox">
                  <div class="item">
                      <animation-content :offsetTopNow="topToScreen" :animationName="'zoomInDown'">
                          <p class="title">探鱼仪相机</p>
                          <p>无人机捕鱼的重点之一是知道鱼群位置，因此需要了解水下情况，水手3会给你需要的信息。</p>
                          <p>投放装置模块的防水相机视野宽阔，光灵敏度低，飞到目标位置上空，观察鱼群水里移动情况，决定诱饵需要投放的位置，然后轻轻地打开开关，使线顺利释放——正好对准目标！</p>
                      </animation-content>
                  </div>
              </div>
          </div>
      </div>
      </animation-content>
      <section class="section-3" :style="{'backgroundImage' : `url(${!isMobile ? 'https://cdn.swellpro.cn/fisher/remote-controller-with-live-video.jpg' : ''})`}">
        <div class="container">
            <img src="https://cdn.swellpro.cn/fisherMobile/remote-controller-with-live-video-m.jpg" alt="" class="minScreen">
            <div class="inlineBox">
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">
                <p class="title">现场直播无人机钓鱼</p>
                <p>遥控器自带第一视角液晶显示屏，可以实时观看水手3相机的视频输出。通过5.8Ghz无线系统，视频传输距离超过1公里，几乎没有延迟或干扰。如果无人机太远或在夜飞时看不清也不用担心，可以通过查看屏幕上的实时视频以及即时更新的飞行数据（如距离，高度，速度和电池电压）来进行控制。这些OSD数据可帮助您确定飞机的方位，可以进行多少次投放，还能判断投放鱼饵的时间和地点。</p>
                </animation-content>
            </div>
        </div>
      </section>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="common-4">
          <div class="container">
              <img src="https://cdn.swellpro.cn/fisher/darcizzle-held-SplashDrone-3-in-the-water.jpg" alt="">
              <div>
                  <div class="inlineBox">
                    
                    <p class="title">
                      整机防水
                    </p>
                    <p>市面上大多数无人机都不防水，普通的无人机在水上飞行具有一定风险性。</p>
                    <p>水手3无人机整机防水，可以防淡水和海水。</p>
                    <p>在海边或者船上没有很好的起飞平台不用担心，水手3可以直接在水面上起飞和降落</p>
                    <p>如果在水面上无法发现鱼群，可以把飞机放在水面上，让相机获取水下世界的画面。</p>
                    <p>采用坚固的3毫米ABS机身，能够承受各种水的作用力，比世界上大多数的消费型无人机更加坚固耐用。</p>
                    
                  </div>
              </div>
          </div>
      </div>
      </animation-content>
      <section class="section-4" :style="{'backgroundImage' : `url(${!isMobile ? 'https://cdn.swellpro.cn/fisher/splashdrone-3-flying-in-wind.jpg' : ''})`}">
        <div class="container">
            <img src="https://cdn.swellpro.cn/fisherMobile/splashdrone-3-flying-in-wind-m.jpg" alt="" class="minScreen">
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
            <p class="title">
                实现全天候工作
            </p>
            <p>
                在海边有大风大雨的情况下操控无人机是一种真正的挑战。水手3配备高扭矩620kv马达和全碳纤维螺旋桨，全新的飞行控制器提供了巨大的动力。当风速高达每小时18英里，重新编程的飞行参数能提供了惊人的自我纠正和高度保持能力。全密封机身不仅防水，同时也防雨，防尘，防冻。在冰上钓鱼时，寒冷的气温也不会对水手的无人机电池造成影响。不管天气如何，环境如何，没有什么阻碍你的无人机钓鱼之旅。
            </p>
            </animation-content>
        </div>
      </section>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="common-5">
          <div class="container">
              <div class="inlineContainer" :style="{'backgroundImage' : `url(${!isMobile ? 'https://cdn.swellpro.cn/fisher/fisherman-flying-splashdrone-3.jpg' : ''})`}">
                  <img src="https://cdn.swellpro.cn/fisherMobile/fisherman-flying-splashdrone-3-m.jpg" alt="" class="minScreen">
                  <div>
                      <p class="title">钓鱼小能手</p>
                      <p>你不必是一个专业的无人机飞手，我们简化了水手 3钓鱼版的使用操作。每一个钓鱼者都能在短时间内熟练地操控它。</p>
                 </div>
              </div>
              <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
              <div class="items">
                  <div class="item">
                      <img src="https://cdn.swellpro.cn/fisher/quick-attached-release-mechanism.jpg" alt="">
                      <p class="title">快速投放</p>
                      <p>投放装置的快拆式设计简化了飞行前的准备工作。只需轻轻拨动一个开关，即可将鱼线套入装置里。</p>
                  </div>
                  <div class="item">
                      <img src="https://cdn.swellpro.cn/fisher/auto-hover-with-gps.jpg" alt="">
                      <p class="title">自动悬停功能</p>
                      <p>双GPS和传感器使水手3自动和准确地悬停在其当前位置和高度。</p>
                  </div>
                  <div class="item">
                      <img src="https://cdn.swellpro.cn/fisher/auto-return-home.jpg" alt="">
                      <p class="title">自动返回</p>
                      <p>一个返航开关可使水手3自行飞回起点，您可安心等待鱼儿上钩。</p>
                  </div>
              </div>
              </animation-content>
          </div>
      </div>
      </animation-content>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="common-6">
          <div class="title">
              他们都在使用水手3钓鱼
          </div>
            <div class="Content">
                  <div class="picContent" ref="content" :class="state">
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/fisher/blacktip-shark.jpg">
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/fisher/snapper.jpg">
                    </div>
                     
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/fisher/jewfish.jpg">
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/fisher/snapper-and-kahawai.jpg">
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/fisher/kahawai.jpg">
                    </div>
                  </div>
                  <div class="picControll">
                    <div class="container" :class="btnRight">
                        <div class="leftBtn" @click.stop="turnLeft()" v-show="flag != 0" >
                            <i class="iconfont icon-shangyiye"></i>
                        </div>
                        <div class="rightBtn" @click.stop="turnRight()" v-show="!showRight">
                            <i class="iconfont icon-xiayiye"></i>
                        </div>
                    </div>
                  </div>
            </div>
          
          <div class="title">
              赶快升级你的钓鱼装备吧！
          </div>
      </div>
      </animation-content>
      <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
      <div class="buy">
          <a href="https://detail.tmall.com/item.htm?spm=a1z10.5-b-s.w4011-17761610828.50.2da6249526o9Fd&id=564379410811&rn=fd1c56b4e467c70fb3040158bbddd9d5&abbucket=11&skuId=3730536031236">购买水手三代钓鱼版</a>
      </div>
      </animation-content>
  </div>
</template>
<script>
import {chectIsMobile} from '~/assets/util'
import SwellproBar from '~/components/headerBar'
import AnimationContent from '~/components/Animation'
export default {
  data () {
    return {
        isMobile: false,
        flag:1,
        topToScreen:0,
        barData:{
                barTitle:'水手三代钓鱼版',
                buyUrl:'https://detail.tmall.com/item.htm?spm=a1z10.5-b-s.w4011-17761610828.50.2da6249526o9Fd&id=564379410811&rn=fd1c56b4e467c70fb3040158bbddd9d5&abbucket=11&skuId=3730536031236',
                items:[{url:'',content:'技术参数'},{url:'',content:'视频'},{url:'',content:'下载'},{url:'',content:'常见问题'}]
        },
    };
  },

  head() {
    return {
        title: '水手3防水无人机钓鱼版 - 斯威普',
        meta: [
               { hid: 'description', name: 'description', content: '水手3钓鱼版是用于水面垂钓和投放救援的防水无人机'},
               { hid: 'keywords', name: 'keywords', content: '无人机钓鱼'}
        ]
    }
  },

  components: {
      SwellproBar,AnimationContent
  },

  computed: {
      state(){
          if(this.flag == 0)
          return 'transOne'
          else if(this.flag == 1)
          return 'transTwo'
          else if(this.flag == 2)
          return 'transThree'
          else if(this.flag == 3)
          return 'transFour'
          else if(this.flag == 4)
          return 'transFive'
      },
      showRight(){
          if(this.flag == 4)
          return true;
          else if(this.flag == 2 && !this.isMobile)
          return true;
          return false;
      },
      btnRight(){
          if(this.flag == 0)
          return 'btnRight';
      }
  },

  mounted() {
      this.init();
  },

  methods: {
      init(){
          if(chectIsMobile())
          this.isMobile = true;
          window.onscroll = ()=>{ //获取滚动条离浏览器顶部的距离
    		   var e=document.documentElement.scrollTop||document.body.scrollTop;
               this.topToScreen = e;
    	  }
      },
      turnLeft(){
             if(this.flag == 0)
             return ;
             --this.flag;
      },
      turnRight(){
          if(!this.isMobile){
              if(this.flag == 2)
              return ;
          }
          else{
              if(this.flag == 4)
              return ;
          }
          ++this.flag;
      }
  }
}

</script>
<style lang='stylus' scoped>
#fisher
    font-weight 100
    >section
        background-repeat no-repeat
        background-position center
        background-size cover
        height 600px
        font-weight 100
        color #fff
    h1,h2
        color #fff
    h1
        font-size 30px
        font-weight 400
        padding-bottom 20px
    .title
        font-size 25px
        font-weight 100
        padding-bottom 20px
    .section-1
        height 800px
        .container
            width 1000px
            padding-top 500px
            p
                padding-top 10px
    .common-1
        padding 50px 0
        .container
            .imgBox
                position relative
                img
                    width 100%
                    display block
                p
                    position absolute
                    max-width 1000px
                    bottom 10px
                    left 85px
                    color #fff
                    font-size 25px
                    font-weight 100
            .contentBox
                width 1000px
                margin 0 auto
                color rgba(0,0,0,.44)
                font-weight 100
                padding-top 30px
                p
                    padding-top 20px
    .common-2
        background #eeeeee
        padding 40px 0
        .container
            width 1000px
            box-sizing content-box
            >p
                font-weight 100
            .modules
                width 100%
                display flex
                flex-flow row wrap
                justify-content space-between
                padding-top 30px
                .item
                    flex 0 0 49%
                    img
                        width 100%
                        display block
                        margin-bottom 20px
    .section-2
        .container
            width 1000px
            box-sizing content-box
            padding-top 150px
            color #000
            .top
                width 500px
                p
                    padding-bottom 20px
            .bottom
                display flex
                margin-left -30px
                margin-top 50px
                >.item
                    flex 0 0 15%
                    color #fff
                    border-left 1px solid rgba(255,255,255,1)
                    padding-left 30px
                    box-sizing border-box
                    .inTitle
                        font-size 30px
                        font-weight 400
                        padding-bottom 10px
                .fistItem
                    border-left none
    .common-3
        padding 50px 0
        .container
            background-repeat no-repeat
            background-position center
            background-size cover
            height 600px
            .inlineBox
                width 1000px
                justify-content flex-end
                display flex
                height 600px
                .item
                    width 500px
                    height 100%
                    background rgba(21,99,115,.4)
                    display flex
                    color #fff
                    justify-content center
                    align-items center
                    >div
                        box-sizing border-box
                        padding 0 15px
                        p
                            padding-bottom 20px
    .section-3
        .container
            width 1000px
            display flex
            justify-content flex-end
            .inlineBox
                width 500px
                height 600px
                display flex
                justify-content center
                align-items center
    .common-4
        padding 50px 0
        .container
            color #000
            >img
                width 100%
                display block
            >div
                background #eeeeee
                .inlineBox
                    width 1000px
                    margin 0 auto
                    color #000
                    padding 30px 0
                    p
                        padding-bottom 20px
    .section-4
        .container
            width 1000px
            padding-top 420px
    .common-5
        padding 50px 0
        .container
            .inlineContainer
                margin 0 auto
                height 600px
                background-repeat no-repeat
                background-size cover
                background-position center
                >div
                    width 1000px
                    margin 0 auto
                    color #fff
                    padding-top 490px
            .items
                display flex
                justify-content space-between
                padding-top 50px
                .item
                    flex 0 0 32.5%
                    color #000
                    >img
                        width 100%
                        display block
                    .title
                        padding-top 20px
    .common-6
        background #eeeeee
        position relative
        >.title
            padding 30px 0
            color #000
            font-size 30px
            text-align center
        .Content
            width 100%
            position relative
            overflow hidden
            .picContent
                width 166.6%
                overflow hidden
                display flex
                transition all .3s
                .item
                    flex 0 0 20%
                    box-sizing border-box
                    padding 0 5px
                    >img
                        display block
                        width 100%
            .transOne
                transform translate3d(0,0,0)
            .transTwo
                transform translate3d(-20%,0,0)
            .transThree
                transform translate3d(-40%,0,0)
            .transFour
                transform translate3d(-60%,0,0)
            .transFive
                transform translate3d(-75%,0,0)
            .picControll
                position absolute
                top 0
                left 0
                width 100%
                height 100%
                .container
                    width 780px
                    display flex
                    align-items center
                    height 100%
                    justify-content space-between
                    >div
                        width 60px
                        height 60px
                        border-radius 50%
                        background rgba(255,255,255,.6)
                        display flex
                        justify-content center
                        align-items center
                        i
                            font-size 35px
                .btnRight
                    justify-content flex-end
    .buy
        padding 100px 0
        width 100%
        height 60px
        display flex
        justify-content center
        a
            display block
            color #fff
            background #f26444
            width 400px
            height 60px
            line-height 60px
            padding 0 20px
            font-size 20px
            text-align center
            border 2px solid #f26444
            border-radius 15px
            transition all .3s
            &:hover
                color #f26444
                background #fff
@media (max-width:600px)
    #fisher
        .section-1
            .container
                width auto
                padding-top 350px
        .common-1
            padding 30px 0
            .container
                .contentBox
                    width auto
                    padding-top 0px
        .common-2
            .container
                width auto
                >p
                    text-align center 
                .modules
                    .item
                        flex 0 0 100%
                        padding-bottom 20px
        .section-2
            height auto
            .container
                width auto
                padding-top 15px
                >img
                    width 100%
                    display block
                .top
                    width auto
                    padding-top 15px
                .bottom
                    >.item
                        flex 0 0 25%
                        .inTitle
                            font-size 20px
        .common-3
            padding 0px
            .container
                height auto
                padding 0px
                >img
                    width 100%
                    display block
                .inlineBox
                    height auto
                    width 100%
                    .item
                        >div
                            padding-top 20px
        .section-3
            height auto
            .container
                width 100%
                display block
                padding-top 15px
                color #000
                >img
                    width 100%
                    display block
                .inlineBox
                    padding-top 15px
                    width 100%
                    height auto
                    display block
        .common-4
            padding-bottom 0px
            .container
                padding 0px
                >div
                    .inlineBox
                        box-sizing border-box
                        padding 15px
                        width 100%
        .section-4
            height auto
            .container
                width 100%
                padding-top 15px
                color #000
                >img
                    width 100%
                    display block
                    padding-bottom 15px
        .common-5
            padding 0px
            .container
                padding 0px
                .inlineContainer
                    height auto
                    >img
                        display block
                        width 100%
                        padding-top 20px
                    >div
                        width 100%
                        padding-top 15px
                        color #000
                        box-sizing border-box
                        padding 15px
                .items
                    padding-top 0px
                    flex-flow row wrap
                    padding 20px 30px
                    box-sizing border-box
                    background #eee
                    .item
                        flex 0 0 100%
                        padding-bottom 20px
        .buy
            padding 20px 0 70px
            a
                width 60%
        .common-6
            background #fff
            .Content
                .picContent
                    width 400%
                .picControll
                    .container
                        width auto
                        >div
                            width 40px
                            height 40px
                            i
                                font-size 25px
@media (min-width: 1600px)
    #fisher
        .common-6
            .Content
                .picControll
                    .container
                        width 950px
</style>